<template>
  <div class="manage">
    <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
      <CommonForm :formLabel="operateFormLabel" :form="operateForm" :inline="true" ref="form"
        @formChanged="formChanged" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUser">+新增</el-button>
      <div class="search">
        <CommonForm :formLabel="searchFormLabel" :form="searchForm" :inline="true" ref="form"
          @formChanged="formChanged">
          <el-button class="searchBtn" type="primary" @click="search">搜索</el-button>
        </CommonForm>
      </div>
    </div>
    <div class="manage-table">
      <CommonTable :tableLable="storeTableLabel" :tableData="isSearch ? searchTableData : storeTableData"
        :config="storeConfig" :operateFormLabel="operateFormLabel" :isManage="true" @tableChanged="tableChanged"
        @pageChanged="pageChanged"></CommonTable>
    </div>

  </div>
</template>

<script>
import CommonForm from '@/components/commonForm/index.vue'
import CommonTable from '@/components/commonTable/index.vue'
export default {
  // 组件名称
  name: 'userManageView',
  data() {
    return {
      isShow: false,
      isSearch: false,
      operateType: "add",
      operateFormLabel: [
        {
          model: 'name',
          label: '姓名',
          type: 'input',
        },
        {
          model: 'account',
          label: '账号',
          type: 'input',
        },
        {
          model: 'password',
          label: '密码',
          type: 'input',
        },

      ],
      operateForm: {
        name: '',
        account: '',
        password: ''
      },
      searchFormLabel: [
        {
          model: 'keyword',
          type: 'input',
          label: ''
        }
      ],
      searchForm: {
        keyword: ''
      },
      storeTableLabel: [
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'account',
          label: '账号',
        },
        {
          prop: 'password',
          label: '密码',
        },
      ],
      storeTableData: [
        {
          name: 'asd',
          account:'2025121015',
          password:'123456'
        },
        {
          name: 'ass',
          account:'2025121016',
          password:'147258'
        },
      ],
      storeConfig: {
        total: 2,
        page: 1
      }
    };
  },
  methods: {
    confirm() {
      this.storeTableData.push(this.operateForm)
      console.log(this.storeTableData);
      this.resetForm()
      this.isShow = false
      this.storeConfig.total = this.storeTableData.length
    },
    cancel() {
      this.resetForm()
      this.isShow = false
    },
    addUser() {
      this.isShow = true
    },
    search() {
      this.isSearch = true
    },
    formChanged(newForm, name) {
      this.$set(this.operateForm, name, newForm)
    },
    tableChanged(newData) {
      this.storeTableData = newData
    },
    pageChanged(currentPage) {
      this.storeConfig.page = currentPage
    },
    resetForm() {
      this.operateForm = {
        name: '',
        addr: '',
        age: '',
        birth: '',
        sex: '',
      }
    }
  },
  components: { CommonForm, CommonTable },
  computed: {
    searchTableData() {
      return this.storeTableData.filter((p) => {
        return p.name.indexOf(this.searchForm.keyword) !== -1
      })
    }
  },
}
</script> 

<style scoped lang='less'>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
</style>
